<template>
  <div style="display: flex;justify-content: center;">
  <div :style="{'width': width}">
    <div v-if="!group.length>0" style="align-items:center; height: 335px;width: 100%;display: flex;align-self: center;justify-content: center;color: #818181;">Oops, no available plans right now...</div>
    <el-carousel :interval="5000" arrow="always" :autoplay="false" style="height: 335px;" v-if="group.length>0">
      <el-carousel-item v-for="groupitem,groupIndex in group" :key="groupIndex" style="height: 305px;padding: 34px;justify-content: center;">
       <div style="display: flex;justify-content: center;width: 100%;">
        <div >
        <div class="groupitem">
          <div   style="padding: 20px;" v-for="item,index in groupitem" :key="index" @click="openDetail(item)" > 
            <img :src="item.image" class="guid-image"/>
            <p class="title">{{item.title}}</p>
            <el-rate
              v-model="item.score"
              disabled
              show-score
              text-color="#ff9900"
              score-template=""
            />
            <p class="tips">{{item.days}} days {{item.nights}} nights , {{item.places}} places to visit </p>
          </div>

        </div>

      </div>
    </div>
      </el-carousel-item>
    </el-carousel>
    </div>
  </div>
  </template>
  <script setup>
    import { ref, watch, onMounted, computed , onUnmounted } from 'vue';
    import { getGuid } from '@/api/index';
    import { useRouter,useRoute } from 'vue-router';
      import { getUser } from '@/utils/auth';
      import cache from "@/plugins/cache";

      const route = useRoute();
const routers =useRouter();
    const always = ref(true)
    const group = ref([])
    const user = getUser()
    const groupsize = ref('');
  const width = ref('');
  groupsize.value= 3;
  width.value = '1240px';

  // 创建响应式变量来保存窗口大小
  const windowWidth = ref(window.innerWidth);
const windowHeight = ref(window.innerHeight);

// 定义一个处理窗口大小变化的函数
const handleResize = () => {
  windowWidth.value = window.innerWidth;
  windowHeight.value = window.innerHeight;

  console.log(windowWidth.value,windowHeight.value)
  if(windowWidth.value<1980){
    groupsize.value= 3;
    group.value = chunkArray(list.value, groupsize.value);
    width.value = '1240px'
  }
  if(windowWidth.value>1980){
    groupsize.value= 6;
    group.value = chunkArray(list.value, groupsize.value);
    width.value = '1240px'
  }
};



    // 接收父组件传递的查询参数
    const props = defineProps({
      queryParam: {
        type: Object,
        required: true
      }
    });
    
    // 响应式变量
    const list = ref([]);
    
    // 获取数据列表
    function getList() {

      const query = {
        page : 0,
        size : 50,
        categorieList : (props.queryParam.check && props.queryParam.check.length>0)?props.queryParam.check.join(","):null,
        where : props.queryParam.where?props.queryParam.where:"",
        region : props.queryParam.region?props.queryParam.region:"",
        title : props.queryParam.title?props.queryParam.title:"",
        noMine: (user && user.email)?user.email:'0'
      }
      
      handleResize();
      getGuid(query).then(res => {
        // console.log(res);
        list.value = res.content;  // 使用 list.value 来更新 list
        // 分成每10个元素一个子数组
        group.value = chunkArray(list.value, groupsize.value);
       console.log(group.value)
      }).catch(error => {
        console.error('Failed to fetch data:', error);
      });
    }
    
    // 观察 queryParam 的变化并重新获取数据
    watch(() => props.queryParam, () => {
      getList();
    }, { deep: true });
    
    // 组件挂载后获取数据
    onMounted(() => {
      window.addEventListener('resize', handleResize);
      getList();
    });
// 在组件卸载时移除 ResizeObserver 监听
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
    function openDetail(item) {
      cache.session.remove('events')
      sessionStorage.removeItem('plans')
      cache.session.setJSON('prePath',route.path)
      routers.push({
					path:'/stepTwo',
					query:{
            id:item.id
          }
				})
    }


    // 分块函数
function chunkArray(array, chunkSize) {
  const result = [];
  for (let i = 0; i < array.length; i += chunkSize) {
    result.push(array.slice(i, i + chunkSize));
  }
  return result;
}
    </script>
  <style scoped>
  .el-carousel__container{
    height: 305px;
  }
    .groupitem{
      display: flex;
      justify-content: flex-start;
  
      
    }
  .scrollbar-flex-content {
    display: flex;
    
  }
  .scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-danger-light-9);
    color: var(--el-color-danger);
  }
  .guid-image{
    width: 250px;
    height: 160px;
    border-radius: 10px;
  }
  .title{
    font-weight: 500;
    font-size: x-large;
    color: #000;
    margin-bottom: 0;
    text-overflow: ellipsis;  /* ellipsis:显示省略符号来代表被修剪的文本  string:使用给定的字符串来代表被修剪的文本*/ 
    white-space: nowrap;   /* nowrap:规定段落中的文本不进行换行   */ 
    overflow: hidden; /*超出部分隐藏*/
  }
  .tips{
    font-weight: 400;
font-size: 18.0439px;
line-height: 21px;
color: #5a5a5a;
  }
  .noneList{
    width: 100%;
    display: flex;
    justify-content: center;
    height: 150px;
    line-height: 100px;
    padding: 20px;
    margin-right: 10px;
    border-radius: 20px;
    background-color: #fafafa;
  }
  </style>
  